<template>
	<view class="content">
		<view :style="{ height: mapHeight + 'px', width: mapWidth + 'px' }">
			<map style="height: 100%;width: 100%" :latitude="latitude" :longitude="longitude" :markers="markers"
				:scale="scale"></map>
		</view>
		<view style="display: flex;flex-direction: column;width: 100%;margin-top: 12px;background-color: #fff;">
			<view
				style="margin-left: 12px;margin-top: 12px;height: 16px;line-height: 16px;border-left: 3px solid #86AB0B;font-size: 16px;">
				<text style="margin-left: 10px;">基地信息</text>
			</view>
			<view style="margin-left: 12px;margin-top: 6px;margin-right: 12px;height: 1px;background-color: #F5F5F5;">
			</view>
			<view style="display: flex;flex-direction: column;margin: 14px 12px;">
				<view style="display: flex;width: 100%;font-size: 14px;">
					<view style="color: #333;width: 70px;text-align: right;">
						<text>基地名称：</text>
					</view>
					<view style="color: #666;width: calc(100% - 70px);">
						<text>{{name}}</text>
					</view>
				</view>
				<view style="display: flex;width: 100%;font-size: 14px;">
					<view style="color: #333;width: 70px;text-align: right;">
						<text>基地位置：</text>
					</view>
					<view style="color: #666;width: calc(100% - 70px);">
						<text>{{address}}</text>
					</view>
				</view>
				<view style="display: flex;width: 100%;font-size: 14px;">
					<view style="color: #333;width: 70px;text-align: right;">
						<text>基地简介：</text>
					</view>
					<view style="color: #666;width: calc(100% - 70px);">
						<text>{{intro}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;flex-direction: column;width: 100%;margin-top: 12px;position: relative;">
			<view
				style="margin-left: 12px;margin-top: 12px;height: 16px;line-height: 16px;border-left: 3px solid #86AB0B;font-size: 16px;">
				<text style="margin-left: 10px;">基地监控</text>
			</view>
			<view id="video-container" class="video" :style="{width: mapWidth + 'px', height: mapHeight + 'px'}"></view>
			<!-- <view style="position: absolute;top: 40px;" :style="{width: mapWidth + 'px', height: mapHeight + 'px'}" @click="fullScreen()"></view> -->
			<view
				style="position: absolute;bottom: 110px;right: 16px;width: 44px;height: 97px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
				<view class="video-direction">
					<view style="width: 100%;height: 33%;" @click="videoOper(0)"></view>
					<view style="width: 100%;height: 34%;display: flex;">
						<view style="width: 50%;height: 100%;" @click="videoOper(2)"></view>
						<view style="width: 50%;height: 100%;" @click="videoOper(3)"></view>
					</view>
					<view style="width: 100%;height: 33%;" @click="videoOper(1)"></view>
				</view>
				<view class="video-zoom">
					<view style="width: 100%;height: 50%;" @click="videoOper(8)"></view>
					<view style="width: 100%;height: 50%;" @click="videoOper(9)"></view>
				</view>
			</view>
			<view style="margin: 10px 12px;height: 70px;">
				<view class="normal" v-for="(item,index) in photoList" :key="index"
					:class="{'active' : index == selectedPhotoIndex}" @click="photoChoice(index)">
					<image :src="item.cover" mode="aspectFit" style="width: 88px;height: 50px;"></image>
				</view>
			</view>
		</view>
		<view style="display: flex;flex-direction: column;width: 100%;margin-top: 12px;">
			<view
				style="margin-left: 12px;margin-top: 12px;height: 16px;line-height: 16px;border-left: 3px solid #86AB0B;font-size: 16px;">
				<text style="margin-left: 10px;">基地气象数据</text>
			</view>
			<view
				style="display: flex;flex-direction: column;margin: 14px 12px;border-radius: 4px;padding: 10px;background-color: #fff;font-size: 14px;color: #333;">
				<view style="width: 100%;display: flex;" v-for="(item,index) in baseData" :key="index">
					<view class="left-bottom" :class="{'left': index < 2}">
						<view style="width: 20px;height: 20px;margin-top: 13px;">
							<image :src="item.left.image" mode="aspectFit" style="width: 20px;height: 20px;"></image>
						</view>
						<view style="margin-left: 10px;margin-top: 14px;">{{item.left.name}}</view>
						<view style="margin-left: 10px;margin-top: 14px;">{{item.left.value}}</view>
					</view>
					<view class="right-bottom" :class="{'right': index < 2}">
						<view style="width: 20px;height: 20px;margin-top: 13px;">
							<image :src="item.right.image" mode="aspectFit" style="width: 20px;height: 20px;"></image>
						</view>
						<view style="margin-left: 10px;margin-top: 14px;">{{item.right.name}}</view>
						<view style="margin-left: 10px;margin-top: 14px;">{{item.right.value}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;flex-direction: column;width: 100%;margin-top: 12px;">
			<view
				style="margin-left: 12px;margin-top: 12px;height: 16px;line-height: 16px;border-left: 3px solid #86AB0B;font-size: 16px;">
				<text style="margin-left: 10px;">土壤报告</text>
			</view>
			<view style="margin-top: 14px;width: 100%;height: 200px;background-color: #fff;">
				<qiun-data-charts type="radar"
					:opts="{fontSize:14,legend:{show: false}, dataPointShape: false, extra: {radar: {labelColor: '#333', opacity:1}}}"
					:chartData="radarData" />
			</view>
			<view style="margin: 10px 14px;border-radius: 4px;">
				<view style="color: #333;padding: 10px;background-color: #fff;display: flex;flex-direction: column;">
					<view v-for="(item,index) in earthData" :key="index"
						style="width: 100%;height: 33px;line-height: 33px;text-align: left;font-size: 14px;margin-top: 5px;display: flex;border-bottom: 0.5px solid #EEEEEE;">
						<view style="width: 100px;">
							<text>{{item.name}}</text>
						</view>
						<view style="margin-left: auto;margin-right: 0;">
							<text>{{item.value}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;align-items: center;margin: 20px 20px;background-color: #E13D33;height: 50px;border-radius: 4px;" @click="popUp()">
			<text style="margin: 0 auto;color: #fff;">购买基地产品</text>
		</view>
		<view>
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view style="align-items: center;justify-content: center;height: 228px;width: 200px;background-color: #fff;">
					<image src="../static/icon_034.png" mode="aspectFit" style="width: 200px;height: 228px;"></image>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import EZUIKit from "ezuikit-js";
	import dateUtil from '@/common/js/date_util.js'
	export default {
		components: {},
		data() {
			return {
				merchantID: "",
				baseID: "",
				name: "",
				address: "",
				intro: "",
				mapWidth: 0,
				mapHeight: 0,
				latitude: 34.76,
				longitude: 113.65,
				markers: [],
				scale: 14, //地图层级
				player: null,
				accessToken: "",
				serialNumber: "",
				appKey: "",
				appSecret: "",
				channelNumber: "",
				photoList: [],
				selectedPhotoIndex: 0,
				baseData: [{
					left: {
						image: "../static/icon_025.png",
						name: "温度",
						value: "0"
					},
					right: {
						image: "../static/icon_026.png",
						name: "湿度",
						value: "0"
					},
				}, {
					left: {
						image: "../static/icon_027.png",
						name: "光照",
						value: "0"
					},
					right: {
						image: "../static/icon_028.png",
						name: "降水",
						value: "0",
					},
				}, {
					left: {
						image: "../static/icon_029.png",
						name: "风速",
						value: "0"
					},
					right: {
						image: "../static/icon_031.png",
						name: "二氧化碳",
						value: "0"
					},
				}],
				radarData: {
					categories: ["1", "2", "3", "4", "5", "6"],
					series: [{
						data: [90, 90, 90, 90, 90, 90],
						color: "#EBE309",
						name: ""
					}],
				},
				earthData: [{
						name: "1",
						value: "90"
					},
					{
						name: "2",
						value: "90"
					},
					{
						name: "3",
						value: "90"
					},
					{
						name: "4",
						value: "90"
					},
					{
						name: "5",
						value: "90"
					},
					{
						name: "6",
						value: "90"
					}
				],
				isPopup: false,
			};
		},
		mounted() {
			// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.mapWidth = res.windowWidth;
					that.mapHeight = res.windowWidth * 9 / 16;
				}
			})
		},
		onLoad(e) {
			this.baseID = e.baseID;
			this.getBaseList();
			this.getBaseInfo();
		},
		onShow() {
			
		},
		methods: {
			change(e){
				console.log('当前模式：'+e.type+',状态：'+e.show);
			},
			popUp() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('center')
			},
			fullScreen() {
				uni.navigateTo({
					url:'/pages/baseCamra?appKey='+this.appKey+'&serialNumber='+this.serialNumber+'&appSecret='+this.appSecret+'&channelNumber='+this.channelNumber+'&landscape=1'
				})
			},
			photoChoice(index) {
				this.selectedPhotoIndex = index;
				this.serialNumber = this.photoList[index].serial_number;
				this.appKey = this.photoList[index].app_key;
				this.appSecret = this.photoList[index].secret;
				this.channelNumber = this.photoList[index].channel_number;
				this.playVideo();
			},
			getBaseList() {
				let that = this;
				this.$http.post({
					data: {
						cmd: "getBaseList",
						merchantId: that.merchantID,
						nowPage: 1,
						pageCount: 100
					}
				}).then(res => {
					if (res.data.result == 0) {
						that.baseList = res.data.body.dataList;
						for (let i = 0; i < that.baseList.length; i++) {
							let item = that.baseList[i];
							if (that.baseID == item.id) {
								that.name = item.name;
								that.address = item.address;
								that.intro = item.content;
								that.latitude = item.lat;
								that.longitude = item.lon;
								let points = [];
								let point = {
									id: i,
									latitude: item.lat,
									longitude: item.lon,
									iconPath: '../static/icon_010.png',
									callout: {
										content: item.name,
										color: '#000',
										fontSize: 12,
										display:'ALWAYS'
									}
								}
								points.push(point);
								that.markers = points;
								let photoList = that.baseList[i].photoList;
								that.photoList = photoList;
								if (photoList.length > 0) {
									that.serialNumber = photoList[0].serial_number;
									that.appKey = photoList[0].app_key;
									that.appSecret = photoList[0].secret;
									that.channelNumber = photoList[0].channel_number;
									that.getToken();
								}
								break;
							}
						}
					} else {
						that.$msg(res.data.resultNote);
					}
				});
			},
			getBaseInfo() {
				let that = this;
				this.$http.post({
					data: {
						cmd: "getRealTimeDataScreen",
						base_id: that.baseID
					}
				}).then(res => {
					if (res.statusCode == 200) {
						if (res.data.result == 0) {
							let current = res.data.body.current;
							that.baseData = [{
								left: {
									image: "../static/icon_025.png",
									name: "温度",
									value: current.wd
								},
								right: {
									image: "../static/icon_026.png",
									name: "湿度",
									value: current.sd
								},
							}, {
								left: {
									image: "../static/icon_027.png",
									name: "光照",
									value: current.gz
								},
								right: {
									image: "../static/icon_028.png",
									name: "降水",
									value: current.yl
								},
							}, {
								left: {
									image: "../static/icon_029.png",
									name: "风速",
									value: current.fs
								},
								right: {
									image: "../static/icon_031.png",
									name: "二氧化碳",
									value: current.CO2
								},
							}];
							if (res.data.body.btype == 1) {
								that.radarData = {
									categories: ["氮", "磷", "钾", "土壤温度", "土壤湿度", "PH值"],
									series: [{
										data: [current.trd, current.trl, current.trj, current.dw, current.sq, current.trPH],
										color: "#EBE309",
										name: ""
									}],
								};
								that.earthData = [{
										name: "氮",
										value: current.trd
									},
									{
										name: "磷",
										value: current.trl
									},
									{
										name: "钾",
										value: current.trj
									},
									{
										name: "土壤温度",
										value: current.dw
									},
									{
										name: "土壤湿度",
										value: current.sq
									},
									{
										name: "PH值",
										value: current.trPH
									}
								];
							} else if (res.data.body.btype == 2) {
								that.radarData = {
									categories: ["NH3", "H2S", "CO2", "光照", "温度", "湿度"],
									series: [{
										data: [current.NH3, current.H2S, current.CO2, current.gz, current.wd, current.sd],
										color: "#EBE309",
										name: ""
									}],
								};
								that.earthData = [{
										name: "NH3",
										value: current.NH3
									},
									{
										name: "H2S",
										value: current.H2S
									},
									{
										name: "CO2",
										value: current.CO2
									},
									{
										name: "光照",
										value: current.gz
									},
									{
										name: "温度",
										value: current.wd
									},
									{
										name: "湿度",
										value: current.sd
									}
								];
							} else if (res.data.body.btype == 3) {
								that.radarData = {
									categories: ["水溶氧", "水PH值", "水温度", "光照", "温度", "湿度"],
									series: [{
										data: [current.sry, current.sPH, current.sw, current.gz, current.wd, current.sd],
										color: "#EBE309",
										name: ""
									}],
								};
								that.earthData = [{
										name: "水溶氧",
										value: current.sry
									},
									{
										name: "水PH值",
										value: current.sPH
									},
									{
										name: "水温度",
										value: current.sw
									},
									{
										name: "光照",
										value: current.gz
									},
									{
										name: "温度",
										value: current.wd
									},
									{
										name: "湿度",
										value: current.sd
									}
								];
							} else {
								that.radarData = {
									categories: ["负氧离子", "PM2.5", "CO2", "光照", "温度", "湿度"],
									series: [{
										data: [current.flz, current.PM2, current.CO2, current.gz, current.wd, current.sd],
										color: "#EBE309",
										name: ""
									}],
								};
								that.earthData = [{
										name: "负氧离子",
										value: current.flz
									},
									{
										name: "PM2.5",
										value: current.PM2
									},
									{
										name: "CO2",
										value: current.CO2
									},
									{
										name: "光照",
										value: current.gz
									},
									{
										name: "温度",
										value: current.wd
									},
									{
										name: "湿度",
										value: current.sd
									}
								];
							}
						} else {
							that.$toast.show(res.data.resultNote);
						}
					} else {
						that.$toast.show('网络出错！');
					}
				});
			},
			getToken() {
				let that = this;
				new Promise((resolve, reject) => {
					uni.request({
						method: "POST",
						url: "https://open.ys7.com/api/lapp/token/get",
						data: {
							appKey: that.appKey,
							appSecret: that.appSecret
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						dataType: 'json',
						success: res => {
							//console.log(res);
							if (res.statusCode == '200') {
								that.accessToken = res.data.data
									.accessToken; //"at.1l2c7hnwazjkp0rx7ra3b4prc7i6fq7p-8oifz13vkt-1cfuo7p-g4iptzkx3";
								that.playVideo();
							}
						},
						fail: err => {
							reject(err);
						}
					});
				});
			},
			videoOper(e) { //监控操纵
				let that = this;
				new Promise((resolve, reject) => {
					uni.request({
						method: "POST",
						url: "https://open.ys7.com/api/lapp/device/ptz/start",
						data: {
							accessToken: that.accessToken,
							appKey: that.appKey,
							appSecret: that.appSecret,
							deviceSerial: that.serialNumber,
							channelNo: that.channelNumber,
							direction: e,
							speed: 1
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						dataType: 'json',
						success: res => {
							console.log(res);
							if (res.statusCode == '200') {
								//that.$toast.show('操作成功');
								that.endVideoOper(e);
							}
						},
						fail: err => {
							reject(err);
						}
					});
				});
			},
			endVideoOper(e) {
				let that = this;
				new Promise((resolve, reject) => {
					uni.request({
						method: "POST",
						url: "https://open.ys7.com/api/lapp/device/ptz/stop",
						data: {
							accessToken: that.accessToken,
							deviceSerial: that.serialNumber,
							channelNo: that.channelNumber,
							direction: e,
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						dataType: 'json',
						success: res => {
							if (res.statusCode == '200') {
								//that.toast.show("操作成功");
							}
						},
						fail: err => {
							reject(err);
						}
					});
				});
			},
			playVideo() {
				// console.log(this.serialNumber);
				// console.log(this.accessToken)
				let serialNumber = this.serialNumber;
				if (this.player == null) {
					this.player = new EZUIKit.EZUIKitPlayer({
						autoplay: true,
						id: "video-container",
						accessToken: this.accessToken,
						url: 'ezopen://open.ys7.com/' + serialNumber + '/1.live',
						template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
						// 视频上方头部控件
						//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
						//plugin: ['talk'],                       // 加载插件，talk-对讲
						// 视频下方底部控件
						//footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
						//audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
						// openSoundCallBack: data => console.log("开启声音回调", data),
						// closeSoundCallBack: data => console.log("关闭声音回调", data),
						// startSaveCallBack: data => console.log("开始录像回调", data),
						// stopSaveCallBack: data => console.log("录像回调", data),
						// capturePictureCallBack: data => console.log("截图成功回调", data),
						// fullScreenCallBack: data => console.log("全屏回调", data),
						// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
						// width: 100%,
						// height: 100%,
					});
				} else {
					this.player.play('ezopen://open.ys7.com/' + serialNumber + '/1.live')
				}

			},
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		// height: 100%;
		background-color: #F5F5F5;
		overflow: hidden;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.video {
		// overflow: hidden;
		margin-top: 12px;
		overflow-x: hidden;
		overflow-y: hidden;
		position: relative;
	}

	.video-direction {
		width: 44px;
		height: 44px;
		background: url(@/static/icon_032.png) center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		display: flex;
		flex-direction: column;
	}

	.video-zoom {
		margin-top: 10px;
		width: 27px;
		height: 43px;
		background: url(@/static/icon_033.png) center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		display: flex;
		flex-direction: column;
	}

	.normal {
		width: 88px;
		height: 50px;
		border-width: 0;
		overflow: hidden;
	}

	.active {
		border: 0.5px solid #007ED7;
	}

	.left {
		width: 50%;
		height: 46px;
		display: flex;
		border-bottom: 0.5px solid #EEEEEE;
	}

	.right {
		width: 50%;
		height: 46px;
		padding-left: 10px;
		display: flex;
		border-left: 0.5px solid #EEEEEE;
		border-bottom: 0.5px solid #EEEEEE;
	}

	.left-bottom {
		width: 50%;
		height: 46px;
		display: flex;
	}

	.right-bottom {
		width: 50%;
		height: 46px;
		padding-left: 10px;
		display: flex;
		border-left: 0.5px solid #EEEEEE;
	}
</style>
